import { Table, Radio, Col, Row } from 'antd';

import React, { useState, useEffect } from 'react';
import ECharts from 'echarts-for-react';
import styles from './style.less';
const { Column } = Table;

import { queryAlarmAnalysis, queryAlarmAnalysisByType } from '@/services/deviceAlarm';

const defalutTypenum = [
  { value: 0, name: '高报警' },
  { value: 0, name: '中报警' },
  { value: 0, name: '低报警' },
];
const Survey: React.FC = () => {
  const [aramNum, setAramNum] = useState({});

  const [typenum, setTypenum] = useState(defalutTypenum);
  const [type, setType] = useState<number>(1);
  const [typeName, setTypeName] = useState<String>('今日');
  const [areaNum, setAreaNum] = useState([]);

  useEffect(() => {
    const setAnalysisData = async () => {
      const analysis = await queryAlarmAnalysis();
      var alarmnum = analysis.aramNum;
      alarmnum.dayPercentage = getPercentage(alarmnum.today_num, alarmnum.yestoday_num);
      alarmnum.dayDifference = alarmnum.today_num - alarmnum.yestoday_num;
      alarmnum.dayDifference = (alarmnum.dayDifference > 0 ? '+' : '') + alarmnum.dayDifference;
      alarmnum.monthPercentage = getPercentage(alarmnum.current_mouth_num, alarmnum.last_mouth_num);
      alarmnum.monthDifference = alarmnum.current_mouth_num - alarmnum.last_mouth_num;
      alarmnum.monthDifference =
        (alarmnum.monthDifference > 0 ? '+' : '') + alarmnum.monthDifference;
      alarmnum.yearPercentage = getPercentage(alarmnum.this_year_num, alarmnum.last_year_num);
      alarmnum.yearDifference = alarmnum.this_year_num - alarmnum.last_year_num;
      alarmnum.yearDifference = (alarmnum.yearDifference > 0 ? '+' : '') + alarmnum.yearDifference;
      setAramNum(analysis.aramNum);
      await changeTypeData(analysis, 1);
    };
    setAnalysisData();
  }, []);

  const changeTypeData = async (analysis: any, selType: number) => {
    setTypenum(analysis.typenum);
    setAreaNum(analysis.areaNum);
    let new_data = { ...option };
    new_data.dataset.source = analysis.trendnum;
    // new_data.xAxis.name=selType==1?"时":selType==2?"日":"月";
    setChartOption(new_data);
  };

  const getPercentage = (num1, num2) => {
    if (num1 == 0 && num2 == 0) {
      return '--';
    }
    var percentage = '+--';
    // num2= num2==0?1:num2;
    if (num2 == 0) {
      num2 = 1;
      num1++;
    }
    percentage = ((num1 - num2) / num2) * 100;
    percentage = percentage.toFixed(2);
    percentage = (num1 > num2 ? '+' : '') + percentage + '%';

    return percentage;
  };

  var option = {
    legend: {
      textStyle: {
        color: '#fff',
      },
    },
    color: ['#f4b766', '#fd6864', '#333'],
    tooltip: {},
    dataset: {
      barGap: 0,
      dimensions: ['product', '警告', '报警', '故障'],
      source: [],
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#fff',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      type: 'category',
    },

    yAxis: {
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#fff',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      name: '报警数',
    },
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
  };

  const DEFAULT_OPTION = {
    color: ['#f4b766', '#fd6864', '#333'],
    tooltip: {
      trigger: 'item',
    },
    title: {
      text: '报警',
      style: { backgroundColor: '#ccc' },

      left: 'center',
      top: 'center',
      textStyle: {
        fontSize: 24,
        color: 'white',
      },
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: '报警级别',
        type: 'pie',
        radius: ['50%', '70%'],
        data: typenum,
      },
    ],
  };

  const [charOption, setChartOption] = useState(option);
  async function handleSizeChange(e) {
    setType(e.target.value);
    setTypeName(e.target.value == 1 ? '今日' : e.target.value == 2 ? '本月' : '全年');
    const analysis = await queryAlarmAnalysisByType({ typeId: e.target.value });
    changeTypeData(analysis, e.target.value);
  }

  return (
    <div className={styles.main}>
      <Row className={styles.flex}>
        <div className={styles.modalItem}>
          <Row className={styles.sinTitle}>
            <span className={styles.signLine}></span>
            <span>报警总数分析(个)</span>
          </Row>
          <Row gutter={24} style={{ margin: 0, marginBottom: '7px' }}>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <p className={styles.number}>{aramNum.today_num}</p>
              <p className={styles.bt}>今日</p>
            </Col>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <p className={styles.number}>{aramNum.yestoday_num}</p>
              <p className={styles.bt}>昨日</p>
            </Col>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <div className={styles.qushiTop}>
                <p>{aramNum.dayPercentage}</p>
                <p className={styles.down}>{aramNum.dayDifference}</p>
              </div>
              <p className={styles.bt}>趋势</p>
            </Col>
          </Row>
          <Row gutter={24} style={{ margin: 0, marginBottom: '7px' }}>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <p className={styles.number}>{aramNum.current_mouth_num}</p>
              <p className={styles.bt}>当月</p>
            </Col>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <p className={styles.number}>{aramNum.last_mouth_num}</p>
              <p className={styles.bt}>上月</p>
            </Col>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <div className={styles.qushiTop}>
                <p>{aramNum.monthPercentage}</p>
                <p className={styles.down}>{aramNum.monthDifference}</p>
              </div>
              <p className={styles.bt}>趋势</p>
            </Col>
          </Row>
          <Row gutter={24} style={{ margin: 0 }}>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <p className={styles.number}>{aramNum.this_year_num}</p>
              <p className={styles.bt}>今年</p>
            </Col>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <p className={styles.number}>{aramNum.last_year_num}</p>
              <p className={styles.bt}>去年</p>
            </Col>
            <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
              <div className={styles.qushiTop}>
                <p>{aramNum.yearPercentage}</p>
                <p className={styles.down}>{aramNum.yearDifference}</p>
              </div>
              <p className={styles.bt}>趋势</p>
            </Col>
          </Row>
        </div>
        <div className={styles.modalItem}>
          <Row className={styles.sinTitle}>
            <span className={styles.signLine}></span>
            <span>{typeName}报警趋势分析</span>
          </Row>
          <Row style={{ justifyContent: 'flex-end', marginTop: '-24px' }}>
            <Radio.Group
              value={{ type }}
              onChange={handleSizeChange}
              className={styles.qushiShanxuan}
            >
              <Radio.Button value="1" className={type == '1' ? styles.btnSelected : ''}>
                今日
              </Radio.Button>
              <Radio.Button value="2" className={type == '2' ? styles.btnSelected : ''}>
                本月
              </Radio.Button>
              <Radio.Button value="3" className={type == '3' ? styles.btnSelected : ''}>
                全年
              </Radio.Button>
            </Radio.Group>
          </Row>
          {charOption.dataset.source.length > 0 ? (
            <ECharts option={charOption} style={{ height: 380, width: '100%' }} />
          ) : null}
        </div>
      </Row>

      <Row className={styles.flex}>
        <div className={styles.modalItem}>
          <Row className={styles.sinTitle}>
            <span className={styles.signLine}></span>
            <span>{typeName}报警分类占比分析</span>
          </Row>
          <ECharts option={DEFAULT_OPTION} style={{ width: '100%' }} />
        </div>

        <div className={styles.modalItem}>
          <Row className={styles.sinTitle}>
            <span className={styles.signLine}></span>
            <span>{typeName}区域报警统计表</span>
          </Row>
          <Table
            rowKey="area_name"
            dataSource={areaNum}
            pagination={{ position: ['none', 'none'] }}
          >
            <Column
              className={styles.bold}
              title="设备区域"
              dataIndex="area_name"
              key="area_name"
            />
            <Column title="设备数量" dataIndex="device_num" key="device_num" />
            <Column title="总报警数" dataIndex="all_num" key="all_num" />
            <Column
              className={styles.bold}
              title="未处置数"
              dataIndex="pending_num"
              key="pending_num"
            />

            <Column className={styles.bold} title="警告" dataIndex="alarm_num1" key="alarm_num1" />
            <Column className={styles.bold} title="报警" dataIndex="alarm_num2" key="alarm_num2" />
            <Column className={styles.bold} title="故障" dataIndex="alarm_num3" key="alarm_num3" />
          </Table>
        </div>
      </Row>
    </div>
  );
};

export default Survey;
